<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 代码样式初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #eaf2ff;
            color: #101010;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        li{
            list-style: none;
        }
        /* 代码主体 */
        /* 上-导航 */
        .nav{
            height: 80px;
            box-shadow: 0 2px 10px rgba(0,0,0,.1);
            background: #fff;
        }
        .nav_content{
            width: 1200px;
            height: inherit;
            margin: 0 auto;
            /* background: lawngreen; */
        }
        .nav_content_left a:nth-of-type(1){
            float: left;
            margin: 9px 25px 9px 0;
        }
        .nav_content_left a:nth-of-type(1) img{
            width: 62px;
            height: 62px;
            display: block;
        }
        .nav_content_left a:nth-of-type(2){
            float: left;
            width: 90px;
            height: 34px;
            background: #8FB4CD;
            line-height: 34px;
            color: #fff;
            font-size: 14px;
            margin: 23px 0;
            border-radius: 18px;
            text-align: left;
            /* 缩进 */
            text-indent: 14px;
        }
        .nav_content_left a:nth-of-type(2) img{
            float: right;
            margin: 16px 8px 14px 5px;
            width: 7px;
            height: 4px;
        }
        /* 上-导航-右侧 */
        .nav_content_right{
            float: right;
            line-height: 80px;
        }
        .nav_content_right a{
            margin-left: 24px;
            /* 相对定位 */
            position: relative;
            display: inline-block;
            line-height: inherit;
            height: 80px;
        }
        .nav_content_right a img{
            position: absolute;
            right: 0px;
            top: -12px;
            display: block;
            width: 20px;
            height: 12px;
        }
        /* 动态下划线 */
        .nav_content_right a::after{
            content: "";
            display: block;
            width: 0%;
            height: 3px;
            background: #F90E0E;
            /* 绝对定位 */
            position: absolute;
            bottom: 0px;
            left: 50%;
            /* 过渡 */
            transition: all .3s;
        }
        /* 注意：不要有空格 */
        .nav_content_right a:hover::after{
            width: 100%;
            left: 0;
        }


        /* 中-表单 */
        .main{
            height: 420px;
            background-image: url('./imgs/banner.jpg');
            background-position: top center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .form_box{
            width: 1200px;
            margin: 0 auto;
            height: inherit;
            /* background: lightcoral; */
        }
        form{
            width: 270px;
            height: 280px;
            background: #fff;
            float: right;
            margin: 45px 0;
            border-radius: 5px;
            padding: 25px 20px;
        }
        .form_box form h1{
            line-height: 26px;
            font-size: 20px;
            text-align: center;
        }
        .form_box form input{
            width: 250px;
            padding-left: 20px;
            height: 45px;
            border: none;
            background: #F3F3F3;
            margin-top: 15px;
            /* 去除外轮廓线 */
            outline: none;
            font-size: 15px;
            color: #333;
            border-radius: 5px;
        }
        /* 伪元素选择器--选中占位符placeholder */
        .form_box form input::placeholder{
            color: #333;
        }
        .form_box form button{
            width: 270px;
            height: 50px;
            border: none;
            outline: none;
            margin-top: 15px;
            background: -webkit-gradient(linear, left top, right top, from(#ffcb5b), to(#ff8800));
            border-radius: 5px;
            color: #fff;
            font-size: 15px;
            cursor: pointer;
        }
        /* 侧栏 */
        .slide{
            width: 50px;
            min-height: 100px;
            /* background: lawngreen; */
            /* 固定定位 */
            position: fixed;
            right: 10px;
            top: 250px;
        }
        .slide button{
            width: 50px;
            height: 50px;
            display: block;
            margin-bottom: 20px;
            border-radius: 50%;
            border: none;
            outline: none;
            line-height: 50px;
            cursor: pointer;
        }
        .slide button:nth-of-type(1){background: #D90024;}
        .slide button:nth-of-type(2){background: #FF395A;}
        .slide button:nth-of-type(3){background: #F08200;}
        .slide button img{
            vertical-align: top;
            margin-top: 13px;
            width: 25px;
            height: 25px;
        }
        /* body{
            height: 2000px;
        } */
        /* 下-列表 */
        .list{
            width: 1200px;
            margin: 0 auto;
            height: 125px;
            background: #fff;
        }
        .list li{
            width: 25%;
            height: inherit;
            /* box-shadow: 0 0 3px red; */
            float: left;
        }
        .list li img{
            display: block;
            float: left;
            width: 48px;
            height: 48px;
            margin: 39px 26px 38px 26px;
        }
        .list li .list_right{
            width: 200px;
            height: inherit;
            float: right;
            /* background: lightblue; */
        }
        .list li .list_right h2{
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-top: 39px;
        }
        .list li .list_right p{
            color: #999;
            font-size: 14px;
            line-height: 24px;
        }
        .list li:hover{
            cursor: pointer;
            background: rgb(240, 240, 240);
        }
    </style>
</head>
<body>
    <!-- 上-导航 -->
    <div class="nav">
        <div class="nav_content">
            <!-- 左侧 -->
            <div class="nav_content_left">
                <a href="">
                    <img src="./imgs/logo.jpg" alt="">
                </a>
                <a href="">立即咨询
                    <img src="./imgs/jz_head_top.png"/>
                </a>
            </div>
            <!-- 右侧 -->
            <div class="nav_content_right">
                <!-- 
                    1、问题1
                        不建议为了一条线，单独再写一个空标签---解决方案：伪元素法 
                    2、问题2
                        超链接间存在细微的间隙---方案：收尾闭合即可
                -->
                <a href="">首页
                <a href="">合作申请<img src="./imgs/jz_hot.png"/>
                <a href="">申请流程<img src="./imgs/jz_hot.png"/>
                <a href="">关于我们</a>
            </div>
        </div>
    </div>
    <!-- 中-表单 -->
    <div class="main">
        <!-- 中-版心 -->
        <div class="form_box">
            <!-- 表单 -->
            <form>
                <h1>预约服务</h1>
                <input type="text" placeholder="请输入姓名">
                <input type="tel" placeholder="请输入联系电话">
                <input type="text" placeholder="请输入合作形式">
                <button>免费获取报价</button>
            </form>
        </div>
    </div>
    <!-- 下-列表 -->
    <ul class="list">
        <li>
            <img src="./imgs/zzdl_youshi1.png" alt="">
            <div class="list_right">
                <h2>130000+家</h2>
                <p>服务10万+客户,覆盖300+城市</p>
            </div>
        </li>
        <li>
            <img src="./imgs/zzdl_youshi2.png" alt="">
            <div class="list_right">
                <h2>3000条</h2>
                <p>全程跟踪指导，好评3万+条</p>
            </div>
        </li>
        <li>
            <img src="./imgs/zzdl_youshi3.png" alt="">
            <div class="list_right">
                <h2>130+种</h2>
                <p>涵盖上百种合作服务类型</p>
            </div>
        </li>
        <li>
            <img src="./imgs/zzdl_youshi4.png" alt="">
            <div class="list_right">
                <h2>130000+家</h2>
                <p>服务10万+客户,覆盖300+城市</p>
            </div>
        </li>
    </ul>
    <!-- 固定-侧栏 -->
    <div class="slide">
        <button><img src="./imgs/kefu01.png" alt=""></button>
        <button><img src="./imgs/kefu.png" alt=""></button>
        <button><img src="./imgs/anniu01_icon05.png" alt=""></button>
    </div>
</body>
</html>